<template>
  <div class="introduce">
    <div class="intro_info">
      <h3>
        <span class="icon"></span>
        <span class="redTex">教你如何画出更美的妆容</span>
      </h3>
      <h4>
        <span class="icon"></span>
        <span>Teacher</span>
        <span class="author">张小宇</span>
      </h4>
      <h5>
        <span class="icon"></span>
        <span class="time">2018年6月6日</span>
        <span class="time">10:00</span>-
        <span class="time">2018年6月6日</span>
        <span class="time">10:00</span>
      </h5>
      <h5>
        <span class="icon"></span>
        <span class="place">上海市静安西路南京西路啊<a>229</a>号<a>1201</a>室</span>
      </h5>
    </div>
    <!-- 课程分类 -->
    <div class="context">
      <div class="curriculum">
        <h3><span></span>课程分类</h3>
        <div>员工培训按内容来划分, 可以分为两种 : 员工技能培训和员工素质培训。</div>
        <p><span>1、</span>员工技能培训 : 是企业针对岗位的需求, 对员工技能培训</p>
        <p><span>2、</span>员工技能培训 : 是企业针对岗位的需求, 对员工技能培训</p>
      </div>
       <div class="curriculum">
        <h3><span></span>讨论方法</h3>
        <div>员工培训按内容来划分, 可以分为两种 : 员工技能培训和员工素质培训。
          员工培训按内容来划分, 可以分为两种 : 员工技能培训和员工素质培训。
          员工培训按内容来划分, 可以分为两种 : 员工技能培训和员工素质培训。
          员工培训按内容来划分, 可以分为两种 : 员工技能培训和员工素质培训。
        </div>

      </div>
    </div>
  </div>
</template>
<script>
  export default {}
</script>
<style lang="less" scoped>
  .introduce {
    background: #fff;
    .intro_info {
      padding: 15px;
      border-bottom: 1px #e5e5e5 solid;
      h3 {
        width: 100%;
        font-weight: normal;
        font-size: 15px;
        font-weight: 600;
        line-height: 28px;
        text-align: left;
        .icon {
          display: inline-block;
          width: 12px;
          height: 12px;
          background: blue;
          margin-right: 7px;
        }
      }
      h4 {
        width: 100%;
        text-align: left;
        font-weight: normal;
        line-height: 28px;
        span {
          font-size: 12px;
          font-weight: bold;
          color: #5e5e5e;
        }
        .author {
          letter-spacing: 1px;
        }
        .icon {
          display: inline-block;
          width: 12px;
          height: 12px;
          background: #333;
          margin-right: 7px;
        }
      }

      h5 {
        width: 100%;
        text-align: left;
        font-weight: normal;
        line-height: 28px;
        span {
          font-size: 11px;
          color: #5e5e5e;
        }
         span:nth-child(2),span:nth-child(4)  {
           margin-right: 3px;
         }
        .time {
          letter-spacing: 2px;
        }
        .icon {
          display: inline-block;
          width: 12px;
          height: 12px;
          background: #333;
          margin-right: 7px;
        }
        .place{
          font-size: 12px;
          color: #5e5e5e;
          a{
            font-size: 12px;
            color: #5e5e5e;
            display: inline-block;
            padding: 0 2.5px;
            margin-bottom: 2px;
          }
        }
      }


    }
    .context{
      padding: 15px;
      .curriculum{
        background: white;
        text-align: left;
        margin-bottom: 10px;
        h3{
          font-weight: normal;
          font-size: 15px;
          font-weight: bold;
         span{
           display: inline-block;
           width: 2px;
           height: 14px;
           background: #c11613;
           margin-right: 5px;
           margin-bottom: 2px;
         }
        }
        div,p{
          line-height: 20px;
          font-size: 12px;
          color: #2e2c2c;
          letter-spacing: 1px;
        }
      }
    }
  }

</style>
